<template>
  <div class="order" style="background: #fff;">
    <div class="body">
      <a href="../addressList/main?type=1">
        <div class="address"  v-if="JSON.stringify(address)!='{}'">
          <div class="lefts">
            <img src="/static/img/address.png" alt="">
          </div>
          <div class="right">
            <p class="person">收货人：{{address.name||address.accept_name}}</p>
            <span class="tele">{{this.address.tel||address.phone}}</span>
            <div class="clear"></div>
            <p class="add">收货地址：
              <span v-if="address.big_address">{{address.big_address+address.address}}</span>
              <span v-else>{{address.address}}</span></p>
          </div>
          <div class="img">
            <img src="/static/img/rectang.png" alt="">
          </div>
          <div class="bottom" style="background: url('/static/img/redblue.png')">
          </div>
        </div>
        <div class="address" v-else>
          <div class="addressNone">
            <img src="/static/img/addAddress.png" alt="">
            <p>您还没添加收货地址，点击这里添加</p>
          </div>
          <div class="img">
            <img src="/static/img/rectang.png" alt="">
          </div>
        </div>
      </a>
      <div style="margin-top: 4vw;">
        <goods :goodsDisplay="this.orderDetail.goods"></goods>
      </div>
      <div style="margin-top: 4vw;">
        <productPrice :actualPrice="this.orderDetail" :shipping_fee="shipping_fee"></productPrice>
      </div>
      <div style="margin-top: 4vw;">
        <invoice @postscript="postscriptFuc"></invoice>
      </div>
      <div style="margin-left: 4vw;margin-top: 1vw">
        <input type="checkbox" id="checkBox" checked  v-on:click="checkItem" style="position:relative;top: .5vw;">
        <label style="color: #999;font-size: 12px;">我已阅读并同意
          <span style="color: #ff4c50;display: inline-block"> <a href="https://super.napin.com/index/goods/article?article_id=14">《纳品网购买服务条款》</a></span>
        </label>
      </div>
      <div class="submits">
        <p>实际付款: <span>￥ {{pay}}</span></p>
        <button class="btn" @click="submit">提交订单</button>
      </div>
      <van-popup  :show="show"  @close="onClose" position="bottom" show-cancel-button
                 style="position:fixed;top: 35vw;hoverflow: hidden;border-radius: 2vw;position:relative;">
        <alertPay :actual="orderDetail.pay_price" :data="dataList" @close="close"
                  @submitOrder="submitOrder"  :order_sn="order_sn" @isPay="isPay" v-if="!shows"></alertPay>
        <div v-else>
          <div style="text-align:center;padding-top: 50px" v-if="ispay">
            <img src="/static/img/mall_pay_suc@2x.png" alt="" style="width: 200px;height: 160px;">
            <p style="font-size: 16px;margin-top: 20px">支付成功</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="toOrder">确定</button>
          </div>
          <div style="text-align:center;padding-top: 50px" v-else>
            <img src="/static/img/mall_pay_failure@2x.png" alt="" style="width: 200px;height: 160px">
            <p style="font-size: 16px;margin-top: 20px">支付失败</p>
            <button style="background: #ff4c50;padding: 5px 20px;color: #ffffff;margin-top: 20px;border-radius: 1.5vw" @click="close">确定</button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
  import goods from '@/components/order/goods'
  import productPrice from '@/components/order/productPrice'
  import invoice from '@/components/order/invoice'
  import request from '@/actions/request.js'
  import alertPay from '@/components/order/alertPay'
  export default {
    name: "order",
    data(){
      return{
        ifChecked:true,
        shows:false,
        show:false,
        returnArr:[],
        actualPrice:'399.00',
        ispay:true,
        orderDetail:[],
        address:[],
        dataList:[],
        coupon_record_id:0,
        address_id:'',
        postscript:'',
        self_lifting: 0,
        order_sn:'',
        isGetMethod:true,
        confirm:1,
        getOrderData:[],
        shipping_fee:'10.00',
        activity:0,
        pay:'',
        routerBack:''
      }
    },
    components:{
      goods,
      productPrice,
      invoice,
      alertPay
    },
    onShow(){
      /*this.ifChecked=true;*/
      this.returnArr=[];
      this.show= false;
      this.shows=false;
      this.isGetMethod=true;
      this.orderDetail=[];
      this.address=[];
      this.dataList=[];
      this.coupon_record_id=0;
      this.address_id='';
      this.postscript='';
      this.self_lifting= 0;
      this.order_sn='';
      this.isGetMethod=true;
      this.confirm=1;
      this.getOrderData=[];
      this.shipping_fee='10.00';
      this.activity=0;
      this.pay='';
      this.routerBack='';
      const getArr = wx.getStorageSync('returnArr');
      const address= wx.getStorageSync('address')||getArr.data.address;
      this.address_id=address.id||address.address_id;
      this.orderDetail = getArr.data;
      this.address =  address;
      const getOrderData = wx.getStorageSync('goods_id');
      this.confirm  = getOrderData;
      let activity_id = wx.getStorageSync("activity");
      if (activity_id) {
        this.activity = activity_id
      }else{
        this.activity = 0
      };
     /* this.routerBack = wx.getStorageSync("routerBack");
      if(this.routerBack == 2){
        wx.switchTab({
          url: '../mine/main',
          success: function (e) {
            var page = getCurrentPages().pop();
            if (page == undefined || page == null) return;
            page.onLoad();
          }
        })
      }*/
      request.getOrderPrice('api/order/getOrderPrice','post',{
        type:this.confirm.type,
        address_id:this.address_id,
        coupon_record_id:0,//优惠券
        self_lifting:0,//自提
        goods_id:this.confirm.goods_id,
        spec_id:this.confirm.spec_id,
        goods_number:this.confirm.goods_number,
        article_id:this.confirm.article_id,
        limit_id:this.confirm.limit_id,
        group_type:this.confirm.group_type,
        group_id:this.confirm.group_id,
        join_id:this.confirm.join_id,
        cart_id:this.confirm.cart_id,
        activity_id:this.activity,
      },{},true,this);
    },
    onUnload(){
      wx.setStorageSync('routerBack','');
      this.show = false;

      wx.switchTab({
        url:'../home/main'
      })


    },
    mounted(){

    },
    watch:{
      show(newVal,oldVal){
        if(newVal==false){
          this.shows=false;
          wx.setStorageSync("fromOrder",1)
         wx.navigateTo({
             url:'../orderList/main?active=0'
         }
         )
        }
      }
    },
    onLoad(){

  },
    methods: {
      submitOrder(radio){
        console.log(radio);
        request.getPay('api/shop/getPay','post',{
          pay_id:radio,
          order_sn:this.order_sn,
          wx_openid:wx.getStorageSync('openid'),
        },{},true,this)
      },
      onClose() {
        this.show=false;
      },
      isPay(res){
        // this.show=!this.show;
        // this.shows=true;
        this.ispay=res;
      },
      close(){
        this.show = !this.show;
        /*wx.navigateTo({
          url:'../orderList/main?active=1'
        })*/
      },
      checkItem(){
        this.ifChecked = !this.ifChecked;
        console.log(this.ifChecked);
      },
      submit(){
        /*console.log(checkVal);*/
        if((this.ifChecked === true)&&(JSON.stringify(this.address)!== '{}')) {
          this.show = !this.show;
            if(this.isGetMethod){
            request.getPayMethod('api/pay/getPayMethod','post',{},{},true,this);
          }
        }else if(JSON.stringify(this.address)==='{}'){
          wx.showToast({
            title: '请选择收货地址',
            icon: 'none',
            duration: 2000
          })
        }else{
          wx.showToast({
            title: '请先勾选《纳品网购买服务条款》',
            icon: 'none',
            duration: 2000
          })
        }
      },
      none(){
        this.show = !this.show;
      },
      postscriptFuc(res){
        this.postscript=res;
      },
      toOrder(){
       this.show = !this.show;
        /* wx.navigateTo({
          url:'../orderList/main?active=2'
        })*/
        wx.setStorageSync("fromOrder",1)
      }
    },
  }
</script>

<style scoped lang="scss">
  .clear{
    clear: both;
  }
  .submits{
    width: 100vw;
    height: 13.33vw;
    background: #fff;
    font-size: 15px;
    color: #333;
    line-height: 13.33vw;
    text-indent: 2.5vw;
    position: fixed;
    bottom: 0px;
    .btn{
      width: 33.3vw;
      height: 100%;
      background: #000;
      color: #fff;
      float: right;
      font-size: 15px;
      line-height: 13.33vw;
    }
    p{
      float: left;
      span{
        color: #ff4c50;
        font-size: 19px;
      }
    }
  }
  .body{
    width:100vw;
    height:auto;
    background: #f5f5f5;
    padding-top: 5vw;
    position: relative;
    padding-bottom: 15vw;
    .submit{
      width: 100vw;
      height: 13.33vw;
      background: #fff;
      font-size: 15px;
      color: #333;
      line-height: 13.33vw;
      text-indent: 2.5vw;
      position: fixed;
      bottom: 0px;
      .btn{
        width: 33.3vw;
        height: 100%;
        background: #000;
        color: #fff;
        float: right;
        font-size: 15px;
        line-height:13.33vw;
      }
      p{
        float: left;
        span{
          color: #ff4c50;
          font-size: 19px;
        }
      }
    }
    .address{
      width:92vw;
      height: 100px;
      background: #fff;
      margin:0vw auto;
      -webkit-border-radius: 2.5vw;
      -moz-border-radius: 2.5vw;
      border-radius: 2.5vw;
      position: relative;
      overflow: hidden;
      box-shadow: 1px 0 1px 0px #ccc;
      .addressNone{
        width: 100%;
        text-align: center;
        color: #333333;
        padding-top: 27px;
        img{
          width: 20px;
        }
      }
      .bottom{
        width:100%;
        height: 1vw;

        position: absolute;
        bottom: 0vw;
      }
      .img{
        width:2.33vw;
        height: 2.67vw;
        float: right;
        position: absolute;
        right: 5vw;
        top: 11vw;
        img{
          width:100%;
          height: 100%;
        }
      }
      .right{
        float:right;
        width:78%;
        height:auto;
        font-size:15px;
        color:#333;
        padding-top:4.5vw;
        padding-right:10vw;
        .person{
          float: left;
        }
        .tele{
          float: right;
        }
        .add{
          font-size:12px;
          color: #666;
          margin-top: 2vw;
        }
      }
      .lefts{
        float: left;
        img{
          width:4.9vw;
          height: 5.33vw;
          margin-top: 10.27vw;
          margin-left: 2vw;
          display: inline-block;
        }
      }
    }
  }
  .van-popup--bottom{
    width: 80vw;
  }
</style>
<style lang="scss">
  .order{
  .van-popup--bottom {
    width:73%;
    top:auto;
    bottom:43vw;
    border-radius: 3vw;
    right:auto;
    left:50%;
    overflow: hidden;
  }
  }

</style>
